<template>
	<view class="container">
		<loading :show="loading_show"></loading>
		<customHead
			:isShowBackArrow="true"
			title="排行榜"
			titlePaddingLeft="30"
			@goback="goback"
			color="#fff"
			:navi_background="`rgba(255, 56, 0, ${opacity})`"
		>
		</customHead>
		
		<view class="content_main">
			<view class="back_img">
				<image :src="swiperList[0].activityImgUrl" mode="aspectFill"></image>
				<view class="cateName_text">
					<text>{{categoryName}}热卖榜</text>
				</view>
			</view>
			<view class="content_box">
				<view class="goods_item" @click="gotoGoodsDetail(item.id)" v-for="(item, index) in goodsList" :key="index">
					<view class="item_left">
						<view class="sort_icon" :class="[index<3?`back${index}`:'back']">
							<text class="top">TOP</text>
							<text class="text">{{index+1}}</text>
						</view>
						<image class="image" :src="item.rotationImgsJson[0]" mode="aspectFill"></image>
					</view>
					<view class="item_right">
						<view class="goods_title">
							<text :style="{color: _temp_titleColor}">{{item.goodsName}}</text>
						</view>
						<view class="desc">
							<text :style="{color: _temp_textColor}">{{item.goodsRemarks}}</text>
						</view>
						<!-- <view class="hot_icon">
							<view class="icon">
								<text>热销</text>
							</view>
							<view class="icon1">
								<text>促</text>
							</view>
						</view> -->
						<view class="price">
							<view class="" v-if="currentFirm.id">
								<span>￥</span>
								<text>
									{{item.goodsPrice}}
								</text>
							</view>
							<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
							<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getApplicationPlugsRecommendedList,
		searchPlugsGoodsByCategoryId,
		searchPlugsHotGoodsList,
		searchHotGoodsList
	} from "@/tools/request/api.js"
	export default {
		data() {
			return {
				goodsList: [],
				windowInfo: {},
				swiperList: [],
				slideFlag: false,
				opacity: 0,
				head_height: 0,
				goodsPage: {
					page: 1,
					size: 10,
					totalPage: 0,
					hasNextPage: false,
				},
				categoryId: 0,
				categoryName: '',
				contentTopPx: 0,
				loading_show: false
			};
		},
		onLoad (option) {
			this.categoryId = option.categoryId;
			this.categoryName = option.categoryName;
			this.getSwiperList();
			this.getGoodList(true);
		},
		methods: {
			gotoAddStore () {
				uni.navigateTo({
					url: '/subpack_my/myStore/myStore'
				})
			},
			addCart (item) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				this.addCartGoods(item);
			},
			goback () {
				uni.navigateBack();
			},
			getSwiperList() {
				this.loading_show = true;
				let data = {
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				getApplicationPlugsRecommendedList(data).then(res => {
					this.loading_show = false;
					if (res.code == 200) {
						let list = res.body;
						this.swiperList = list.filter(item => item.type == 'rankingAll');
					}
				})
			},
			gotoGoodsDetail (id) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: `/subpack_category/goodsDetail/goodsDetail?id=${id}`
				})
			},
			// 获取热销商品列表
			async getGoodList (clear) {
				let data = {
					page: this.goodsPage.page,
					size: this.goodsPage.size,
					businessId: this.businessId,
					goodsCategoryId: this.categoryId
				};
				let res = await searchHotGoodsList(data);
				if (res.code != 200) return uni.$showMsg();
				this.goodsPage.totalPage = res.body.total;
				this.goodsPage.hasNextPage = res.body.hasNextPage;
				let list = res.body.list;
				list.forEach((item) => {
					if (item.rotationImgsJson) {
						item.rotationImgsJson = JSON.parse(item.rotationImgsJson);
					}
				})
				if (clear) {
					this.goodsList = res.body.list;
				} else {
					this.goodsList = this.goodsList.concat(res.body.list);
				}
			},
			onPageScroll (e) {
				if (e.scrollTop >= 140) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		position: relative;
		
		.content_main{
			width: 100%;
			
			.back_img{
				width: 100%;
				height: 600rpx;
				position: relative;
				
				image{
					width: 100%;
					height: 100%;
				}
				.cateName_text{
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 68rpx;
					font-weight: bold;
					color: #f7f7f7;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
			.content_box{
				position: absolute;
				top: 500rpx;
				width: 100%;
				position: absolute;
				left: 0;
				padding: 0 20rpx;
				box-sizing: border-box;
				
				.goods_item{
					width: 100%;
					padding: 30rpx 15rpx;
					box-sizing: border-box;
					display: flex;
					background-color: #fff;
					margin-top: 20rpx;
					border-radius: 20rpx;
					overflow: hidden;
					
					.item_left{
						display: flex;
						align-items: center;
						position: relative;
						
						.image{
							width: 200rpx;
							height: 200rpx;
							border-radius: 10rpx;
						}
						.sort_icon{
							color: #fff;
							position: absolute;
							top: 0;
							left: 0;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 6rpx 10rpx;
							border-radius: 15rpx;
							
							.top{
								font-size: 16rpx;
							}
							
							.text{
								font-size: 24rpx;
							}
						}
						.back0{
							background-image: linear-gradient(to bottom, #ff606b, #ff404d);
						}
						.back1{
							background-image: linear-gradient(to bottom, #FF9843, #FF5810);
						}
						.back2{
							background-image: linear-gradient(to bottom, #FFC54B, #FFAD4C);
						}
						.back{
							background-image: linear-gradient(to bottom, #30FABB, #14DA9B);
						}
					}
					
					.item_right{
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 0 20rpx;
						box-sizing: border-box;
						
						.goods_title{
							width: 100%;
							max-height: 3em;
							white-space: normal;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							line-height: 40rpx;
							font-size: 30rpx;
						}
						
						.desc{
							width: 100%;
							white-space: normal;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 26rpx;
							color: #9a9a9a;
							margin-top: 10rpx;
						}
						.price{
							width: 100%;
							margin-top: 20rpx;
							font-size: 30rpx;
							color: #FF0000;
							font-weight: bold;
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							span{
								font-size: 30rpx;
							}
							.image{
								width: 50rpx;
								height: 50rpx;
							}
							.desc_text{
								font-size: 26rpx;
								color: #aaaaaa;
							}
						}
						.hot_icon{
							display: flex;
							align-items: center;
							
							.icon{
								width: 54rpx;
								height: 34rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								background-color: #FFDEE2;
								border-radius: 10rpx;
								margin-right: 10rpx;
								
								text{
									color: #ff0000;
									font-size: 22rpx;
								}
							}
							.icon1{
								width: 40rpx;
								height: 34rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 10rpx;
								border: 2rpx solid #ff0000;
								
								text{
									color: #ff0000;
									font-size: 22rpx;
								}
							}
						}
					}
				}
			}
		}
		
		.head{
			width: 100%;
			position: absolute;
			padding-bottom: 20rpx;
			top: 0;
			left: 0;
			z-index: 99999999;
			
			.title{
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				
				.leftIcon{
					width: 80rpx;
					height: 100%;
					display: flex;
					align-items: center;
				}
				
				.headLine{
					padding: 0 10rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: #fff;
				}
			}
		}
	}
</style>
